要如何應用Angular的服務(Service)元件呢?首先，要import資料類別、Service類別，在constructor建構子，來注入此Service類別，設定成私有的Service。新增一個函式，來取得Service的資料列表。最後，在ogOnInit事件，呼叫此函式，讓程式，可以一進入，就呼叫此函式，列出資料。

在app-component.ts，修改後的程式碼，如下所示：

import { Component, OnInit } from '@angular/core';

// 引用資料類
import { Employeeinfo } from './employeeinfo';
// 載入Service
import { EmployeeserviceService } from './employeeservice.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  employeelists: Employeeinfo[];

  // 建栜子
  constructor(private employeeService: EmployeeserviceService) {}

  // 初始化，要先元件 implements OnInit
  ngOnInit() {
    this.getEmployees();
  }

  getEmployees(): void {
    this.employeelists = this.employeeService.getEmployee();
  }

  // 觸發事件 函式。
  doclickevent(): void {
    alert('test');
  }
}

修正程式碼：要用ngOnInit() 初始化事件，要先implements OnInit

網頁執行結果，跟原來的列表一樣，只是寫法改成更結構化。